<template>
  <div class="app">
    <el-row type="flex" align="middle" justify="center" class="app">
      <!-- 主题内容-->
      <el-col :span="10" class="box">
        <el-row type="flex" align="middle" justify="center" :gutter="30" class="box">
          <el-col :span="12">
            <div class="img">
              <img src="../assets/default.jpg" class="image"/>
            </div>
          </el-col>
          <!-- 登录信息-->
          <el-col :span="12">
            <div class="login">
              <div class="txt">教师登录</div>
              <el-form size="small" :model="manager" :rules="rules" ref='loginFrom'>
                <el-form-item prop="account">
                  <el-input
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-s-custom"
                  v-model="manager.account"
                  clearable
                  size="small"
                  class="input">
                </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                  placeholder="请输入密码"
                  prefix-icon="el-icon-s-goods"
                  v-model="manager.password"
                  show-password
                  clearable
                  size="small"
                  class="input">
                </el-input>
                </el-form-item>
                </el-form>
                <el-checkbox v-model="checked" class="input">
                  <span class="check">记住我</span></el-checkbox>
                  <div>
                    <!-- 登录按钮-->
                <el-button type="primary" round class="btn" :disabled="!single" @click="login_b('loginFrom')">登录</el-button></div>
                <el-checkbox v-model="single" >
                  <span class="check">我已同意</span>
                  <span class="txt2">《伯乐马用户服务协议》</span>
                  </el-checkbox>
                  <div class="llq">
                    推荐浏览器：
                    <el-link href="https://www.google.cn/chrome/" :underline="false">
                      <img src="../assets/谷歌.png" class="icon">
                      <span class="txt3">谷歌</span>
                    </el-link>
                    <el-link href="http://www.firefox.com.cn/" :underline="false">
                      <img src="../assets/火狐.png" class="icon"/>
                      <span class="txt3">火狐</span>
                      </el-link>
                  </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import http from '@/utils/HttpUtil'
export default{
  data () {
    let checkPhone = (rule, value, callback) => {
      let phoneReg = /^1[3456789]\d{9}$/
      if (!phoneReg.test(value)) {
        return callback(new Error('账号必须为手机号格式！'))
      }
      callback()
    }
    let checkPwd = (rule, value, callback) => {
      let pwdReg = /^[a-z0-9_-]{6,18}$/
      if (!pwdReg.test(value)) {
        return callback(new Error('密码必须为请输入六位数及以上的数字字母组合'))
      }
      callback()
    }
    return {
    manager: {
      account: '',
      password: ''
    },
    rules: {
      account: [{
        required: true, message: '请输入用户名', tigger: 'blur'
      },
      {
        validator: checkPhone, tigger: 'blur'
      }],
      password: [{
        required: true, message: '请输入正确的密码', tigger: 'blur'
      },
      {
        validator: checkPwd, tigger: 'blur'
      }]
    },
    checked: false,
    single: true,
    action: {
      login: 'LearningPlatform/manager/login'
    }
    }
  },
  components: {

  },
  methods: {
    login_b(refName) {//validate选择，valid有效
      this.$refs[refName].validate((valid) => {
        if(valid) {
          //校验通过，对接登录
          let params = {
            account: this.manager.account,
            password: this.manager.password
          }
          console.log(params)
          http.xhrPost(this, this.action.login, params, (res) => {
            sessionStorage.setItem('userId', res.data.userId)
            this.$message({
              type: 'success',
              message: '登录成功',
              duration: 1000
            })
            this.$router.push('/index')
          })
        } else {
          //校验不通过
          return false
        }
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
  @import '../assets/style/common.scss';

   // 点击checkbox时(就是具有class为btn-primary，且有disabled属性的元素)
  .ivn-btn-primary[disabled]:hover{//hover和active在ELement-ui中感觉效果一样
    background-color:#2D8CF0;
    //border-color: #2D8CF0;
    color: #fff;
  }
  .app {
    width: 100%;
    height: 100%;
    background: url(../assets/login.png) no-repeat;
    .box {
      width: 700px;
      height: 360px;
      background: white;
      border-radius: 15px; // 圆角边距
      .img{
        width: 100%;
        height: 320px;
       /* background: url(../assets/default.jpg); */
        .image {
          width: 100%;
          height: 100%;
          border-radius: 15px;
          box-shadow: 2px 2px 5px rgba(0, 0, 0, .12);//水平位置，垂直位置，模糊半径，阴影颜色
        }
      }
      .login{
        width: 100%;
        height: auto;
        .txt {
          font-size: 20px;
          color: #2d8cf0;
          text-align: center;
          margin-bottom: 20px;
        }
        .input {
         margin-top: 8px;
         border-radius: 30px;
        }
        .check {
          font-size: 12px;
        }
        .btn {
          margin-top: 20px;
          width: 100%;
        }
        .txt2 {
          font-size: 10px;
          color: #999999;
        }
        .llq {
          margin-top: 15px;
          font-size: 12px;
          .icon {
          width: 20px;
          height: 20px;
        }
        .txt3{
          position: relative;
          font-size: 12px;
          top: -5px;
          color: #409EFF;
        }
        }
    }
  }
}
</style>
